<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <link rel="stylesheet" href="layui/css/layui.css" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" href="fonts/iconfonts.css" th:href="@{/fonts/iconfonts.css}">
    <script type="text/javascript" src="js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
    <script type="text/javascript" src="layui/layui.js" th:src="@{/layui/layui.js}"></script>
    <script type="text/javascript" src="layui/layui.all.js" th:src="@{/layui/layui.all.js}"></script>
    <style type="text/css">
        .img_wrap{
            overflow: hidden;
            clear: both;
            text-align: center;
        }
        .img_wrap ul{
            padding:10px;
        }
        .img_wrap ul li{
            width:19%;
            height: 300px;
            display:inline-block;
        }
        .img_wrap ul li img{
            width: 100%;
            height: 100%;
        }

        .commodity_info{
            padding: 10px;
            margin-top: 10px;
            border-top: 2px solid #CCCCCC;
            margin-bottom: 100px;
        }
        .price{
            margin-right: 100px;
            font-size: 25px;
            font-weight: bolder;
            color: rgb(255, 0, 76);
        }
        .old_price{
            font-size: 20px;
            font-weight: bold;
            color: orange;
            text-decoration: line-through;
        }
        .want{
            font-size: 15px;
            font-weight: 800;
        }
        .commodity_title{
            font-size: 25px;
            font-weight: bolder;
            margin: 10px;
        }
        .click,.repertory{
            padding: 5px;
        }
        .description{
            margin-top: 5px;
            font-size: 25px;
            font-weight: 900;
        }
        .desc_content{
            padding: 5px;
            font-size: 15px;
        }

        .btn_wrap{
            width: 100%;
            height: 50px;
            position: fixed;
            bottom: 0px;
            left: 0px;
        }
        .btn_wrap button{
            margin-top: 8px;
        }
        .updateBtn{
            margin-left: 420px;
        }
    /*    用户信息*/
        .userInfo img{
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px">
        <legend>商品详情</legend>
    </fieldset>
    <div class="img_wrap">
        <ul>
            <li class="img_item" th:each="commodityImg:${commodityImgList}">
                <img th:src="${commodityImg.imgSrc}"/>
            </li>
        </ul>
    </div>
<!-- 商品信息 -->
    <div class="commodity_info">
        <div class="commodity_price">
            <span class="price">￥ [[${commodity.price}]]</span>
<!--            <span class="want">[[${commodity.collectCount}]] 人想要</span>-->
        </div>
        <p class="old_price">￥ [[${commodity.oldPrice}]]</p>
        <h2 class="commodity_title">[[${commodity.title}]]</h2>
        <div class="commodity_count">
            <span class="click layui-badge layui-bg-blue">[[${commodity.clickCount}]] 人浏览</span>
            <span class="repertory layui-badge layui-bg-orange">剩余 [[${commodity.repertory}]]</span>
        </div>
        <div class="userInfo_wrap">
            <div class="userInfo">
                <img th:src="${commodity.user.avatarUrl}" />
                <span>[[${commodity.user.nickName}]]</span>
            </div>
            <div>[[${commodity.user.openid}]]</div>
        </div>
        <h2 class="description">商品描述</h2>
        <hr>
        <span class="desc_content">[[${commodity.description}]]</span>
    </div>

<!-- 操作按钮 -->
    <div class="btn_wrap">
        <!-- 该商品 id -->
        <input type="hidden" id="commodityId" th:value="${commodity.id}" />
        <!-- 该商品的标题 -->
        <input type="hidden" id="title" th:value="${commodity.title}" />
        <!-- 商品发布者的 id -->
        <input type="hidden" id="useId" th:value="${commodity.user.id}" />
        <button type="button" class="layui-btn layui-btn-disabled updateBtn" th:if="${commodity.state == 3}">
            已下架
        </button>
        <button type="button" class="layui-btn layui-btn-disabled updateBtn" th:if="${commodity.state == 4}">
            已删除
        </button>
        <button type="button" id="delCommodity" class="layui-btn layui-btn-warm updateBtn" th:if="${commodity.state == 1}">
            下架
        </button>
        <button type="button" class="layui-btn layui-btn-disabled updateBtn" th:if="${commodity.state == 2}">
            已售罄
        </button>
        <button type="button" id="closeBtn" class="layui-btn layui-btn-primary">
            关闭
        </button>
    </div>

    <script>
        // 下架商品
        $("#delCommodity").on('click',function(){
            let commodityId = $("#commodityId").val();
            let title = $("#title").val();
            let userId = $("#useId").val();
            layer.confirm("确定要下架该商品吗？",function(data){
                $.ajax({
                    type: 'post',
                    url:'/commodity/delCommodity',
                    data:{"commodityId":commodityId,"title":title,"userId":userId},
                    success:function(result){
                        if(result.success){
                            layer.msg(
                                result.message,
                                {
                                    icon:1,
                                    time:1000
                                },
                                function(){
                                    // 先得到当前 iframe 层的索引
                                    var index = parent.layer.getFrameIndex(window.name);
                                    // 关闭当前 iframe 层
                                    parent.layer.close(index);
                                }
                            );
                        } else{
                            layer.msg(
                                result.message,
                                {
                                    icon:2,
                                    time:1000
                                }
                            );
                        }
                    },
                    error: function(data){
                        layer.msg("网络错误！");
                    }
                });
            });
            return false;
        });
        // 关闭当前窗口
        $("#closeBtn").on("click",function(){
            let index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        });
    </script>
</body>
</html>